<template>
  <div id="app">
    <div id="canvasToPic" ref="canvasToPic">
      <router-view class="main-container" />
      <!-- <el-button
        type="primary"
        size="mini"
        style="margin-left: 20px"
        @click="getHtml2cancas"
        >导出</el-button
      > -->
    </div>
    <!-- <Header /> -->
  </div>
</template>
<script>
// import Header from "@/components/Header.vue";
// import Footer from "@/components/Footer.vue";
// import html2canvas from "html2canvas";
export default {
  name: "App",
  components: {
    // Header,
    // Footer,
  },
  created() {},
  methods: {
    // getHtml2cancas() {
    //   // console.log(1111);
    //   var canvasToPic = document.getElementById("canvasToPic");
    //   // var opts = {
    //   //   canvas: canvas,
    //   //   useCORS: true, // 【重要】开启跨域配置
    //   //   scrollY: 0, // 纵向偏移量 写死0 可以避免滚动造成偶尔偏移的现象
    //   // };
    //   window.scrollTo(0, 0),
    //     html2canvas(canvasToPic, {
    //       // backgroundColor: "transparent", //设置背景色为透明
    //       backgroundColor: "black", //设置背景色为透明
    //     }).then((canvas) => {
    //       //回调中返回的其实就是一个canvas对象
    //       //可以使用canvas的toDataURL方法生成图片链接
    //       //url就是生成的链接可直接写入image标签的src中展示
    //       this.url = canvas.toDataURL("image/png");
    //       // 创建一个a标签
    //       var link = document.createElement("a");
    //       //将生成的图片url赋值给a标签的href属性
    //       link.href = this.url;
    //       //设置下载的文件名
    //       link.download = "页面截图";
    //       // 将a标签插入dom中
    //       document.body.appendChild(link);
    //       //模拟点击事件触发下载
    //       link.click();
    //       // 完成之后销毁创建的a标签
    //       document.body.removeChild(link);
    //     });
    // },
  },

  // created() {
  //   // console.log(111,this.$router.originalPush)
  //   this.$router.push = (val) => {
  //     let routeUrl = this.$router.resolve(val);
  //     window.open(routeUrl.href, "_blank");
  //   };
  // },
};
</script>
<style lang="scss" scoped>
#app {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  // 隐藏横向滚动条
  // overflow-x: hidden;
  background-color: rgb(0, 2, 18);
  // background-color: rgb(12, 30, 73);
}
.main-container {
  // margin-top: 74px;
  margin-bottom: 113px;
}

//响应式设计
@media screen and (max-width: 768px) {
  .main-container {
    margin-bottom: 160px;
  }
}
</style>
